<%@ page import="org.clipjoint.enums.GameTypeEnum" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
</head>

<body>
<div class="layui-container">

    <%-- 搜索表单 --%>
    <form class="layui-form">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">游戏名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入游戏名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">价格区间</label>
            <div class="layui-input-inline" style="width: 110px">
                <input type="text" name="minprice" autocomplete="off" placeholder="请输入最小价格" class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 10px">--</label>
            <div class="layui-input-inline" style="width: 110px">
                <input type="text" name="maxprice" autocomplete="off" placeholder="请输入最大价格" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">类别</label>
            <div class="layui-input-inline">
                <select name="type">
                    <option value=""></option>
                    <c:forEach items="${ GameTypeEnum.values() }" var="type">
                        <option value="${ type.name() }" }>${ type.name() }</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">发布时间</label>
            <div class="layui-input-inline">
                <input type="text" name="time" class="layui-input" id="time" placeholder="请选择发布时间范围">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" lay-submit lay-filter="search"><i
                        class="layui-icon layui-icon-search"></i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>清空
                </button>
            </div>
        </div>
    </form>

    <%-- 数据表格 --%>
    <table id="table" lay-filter="table"></table>

    <%-- 数据表格的头工具栏 --%>
    <script type="text/html" id="header-tool">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i
                class="layui-icon layui-icon-delete"></i>删除
        </button>
    </script>

    <%-- 行内工具栏 --%>
    <script type="text/html" id="inline-tool">
        <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detailGame">详情</button>
        <button class="layui-btn layui-btn-xs" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
    </script>

</div>

<script type="text/javascript" src="${ bp }/static/layui/layui.all.js"></script>
<script type="text/javascript">
    layui.use(['form', 'table', 'layer', 'laydate', 'jquery'], function () {
        let form = layui.form;
        let table = layui.table;
        let laydate = layui.laydate;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 日期时间范围
        laydate.render({
            elem: '#time',
            type: 'datetime',
            range: true
        });

        // 渲染table标签
        table.render({
            // 对应dom元素
            elem: '#table',
            // 自定义唯一id
            id: 'table',
            // 绑定头工具栏
            toolbar: '#header-tool',
            // 数据接口
            url: '${ bp }/gameadmin?method=list',
            // 开启分页
            page: true,
            // 每页显示条数
            limits: [5, 10, 20],
            // 显示加载图标
            loading: true,
            // 禁用自动排序
            autoSort: false,
            // 表头
            cols: [[
                {type: 'checkbox', width: 40},
                {title: '序号', type: 'numbers', width: 50},
                {field: 'name', title: '游戏名', width: 75},
                {field: 'nickname', title: '游戏昵称', width: 75},
                {field: 'type', title: '类别', width: 60},
                {field: 'preprice', title: '原价格'},
                {field: 'off', title: '折扣'},
                {field: 'price', title: '游戏价格', width: 105, sort: true},
                {field: 'content', title: '游戏简介', width: 90},
                {field: 'credit', title: '积分', width: 75, sort: true},
                {field: 'system', title: '系统配置', width: 90},
                {
                    field: 'time',
                    title: '发布时间',
                    width: 110,
                    sort: true,
                    templet: '<div>{{ d.time === undefined ? "" : layui.util.toDateString(d.time, "yyyy-MM-dd HH:mm:ss") }}</div>'
                },
                // {
                //     field: 'last_update_time',
                //     title: '修改时间',
                //     width: 180,
                //     sort: true,
                //     templet: '<div>{{ d.last_update_time === undefined ? "" : layui.util.toDateString(d.last_update_time, "yyyy-MM-dd HH:mm:ss") }}</div>'
                // },
                {title: '操作', fixed: 'right', width: 165, align: 'center', toolbar: '#inline-tool'}
            ]]
        });

        // 监听排序事件
        table.on('sort(table)', function (obj) {
            // 当前排序的字段名
            let orderField = obj.field;
            // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            let orderType = obj.type;
            // 重新加载表格
            table.reload('table', {
                // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
                initSort: obj,
                // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                where: {
                    orderField: orderField,
                    orderType: orderType
                }
            });
        });

        // 监听头工具栏事件
        table.on('toolbar(table)', function (obj) {
            // 获取按钮标签的lay-event属性值
            switch (obj.event) {
                case 'add':
                    // 从父窗口打开
                    parent.layer.open({
                        // 使用iframe打开一个窗口
                        type: 2,
                        // 窗口标题
                        title: '添加游戏',
                        // 目标页面的地址
                        content: '${ bp }/game/add.jsp',
                        // 宽高
                        area: ['800px', '500px'],
                        // 开启最大化最小化
                        maxmin: true,
                        // 去除遮罩
                        shade: 0
                    });
                    break;
                case 'delete':
                    // 获取到被选中行的数据数组
                    let checkData = table.checkStatus('table').data;
                    // 判断是否没有勾选任何内容
                    if (checkData.length === 0) {
                        // 没有勾选任何内容，错误提示
                        layer.msg('请勾选需要删除的行', {
                            time: 2000,
                            icon: 2
                        });
                    } else {
                        // 获取id数组
                        let ids = [];
                        checkData.forEach((item, index) => {
                            ids.push(item.id);
                        });
                        // 确认删除
                        layer.confirm('删除后数据将不可恢复！是否删除?', {icon: 3, title: '提示'}, function (index) {
                            // 使用ajax请求接口
                            $.ajax({
                                url: '${ bp }/gameadmin?method=deleteAll',
                                type: 'post',
                                data: {
                                    ids: JSON.stringify(ids)
                                },
                                dataType: 'json',
                                success: (result) => {
                                    if (result.code === 0) {
                                        layer.msg(result.msg, {
                                            time: 1000,
                                            icon: 1
                                        }, function () {
                                            table.reload('table');
                                        });
                                    } else {
                                        layer.msg(result.msg, {
                                            time: 2000,
                                            icon: 2
                                        });
                                    }
                                },
                                error: () => {
                                    console.log('请求接口错误');
                                }
                            });

                            // 关闭确认框
                            layer.close(index);
                        });
                    }
                    break;
            }
        });

        // 监听行内工具栏事件
        table.on('tool(table)', function (obj) {
            // 获取按钮标签的lay-event属性值
            switch (obj.event) {
                case 'detailGame':
                    // 打开详情页面窗口
                    parent.layer.open({
                        // 使用iframe打开一个窗口
                        type: 2,
                        // 窗口标题
                        title: '游戏详情',
                        // 目标页面的地址
                        content: '${ bp }/gameadmin?method=detailGame&id=' + obj.data.id,
                        // 宽高
                        area: ['800px', '500px'],
                        // 开启最大化最小化
                        maxmin: true,
                        // 去除遮罩
                        shade: 0
                    });
                    break;
                case 'update':
                    // 打开修改页面窗口
                    parent.layer.open({
                        // 使用iframe打开一个窗口
                        type: 2,
                        // 窗口标题
                        title: '修改游戏',
                        // 目标页面的地址
                        content: '${ bp }/gameadmin?method=updatePage&id=' + obj.data.id,
                        // 宽高
                        area: ['800px', '500px'],
                        // 开启最大化最小化
                        maxmin: true,
                        // 去除遮罩
                        shade: 0
                    });
                    break;
                case 'delete':
                    // 获取本行数据的id属性
                    let id = obj.data.id;
                    // 确认删除
                    layer.confirm('删除后数据将不可恢复！是否删除?', {icon: 3, title: '提示'}, function (index) {
                        // 使用ajax请求接口
                        $.ajax({
                            url: '${ bp }/gameadmin?method=delete',
                            type: 'post',
                            data: {
                                id: id
                            },
                            dataType: 'json',
                            success: (result) => {
                                if (result.code === 0) {
                                    layer.msg(result.msg, {
                                        time: 1000,
                                        icon: 1
                                    }, function () {
                                        table.reload('table');
                                    });
                                } else {
                                    layer.msg(result.msg, {
                                        time: 2000,
                                        icon: 2
                                    });
                                }
                            },
                            error: () => {
                                console.log('请求接口错误');
                            }
                        });

                        // 关闭确认框
                        layer.close(index);
                    });
                    break;
            }
        });

        // 监听查询表单提交
        form.on('submit(search)', function (data) {
            // 获取查询参数
            let searchParams = data.field;
            // 重新加载表格
            table.reload('table', {
                // 请求参数
                where: searchParams,
                // 查询之后，将当前页码设置为1
                page: {
                    curr: 1
                }
            });
        });

    });
</script>

</body>
</html>
